<template>
    <div class="content">
        <div class="top">
            <div class="top-form">
                <el-input v-model="form.communityname" placeholder="请输入发布小区" style="margin-left: 0"></el-input>
                <el-input v-model="form.title" placeholder="请输入公告主题" clearable></el-input>
                <el-input v-model="form.content" placeholder="请输入发布内容" clearable style="width: 30%"></el-input>
                <el-button type="success" @click="add" class="postButton" icon="el-icon-plus" v-if="this.type == 1">发布公告</el-button>
                <el-button type="primary" @click="reset" class="postButton">重置</el-button>
            </div>
        </div>

        <div class="contain">
            <div class="tab">
                <el-tabs type="border-card"  v-model="activeName">
                    <el-tab-pane label="公告信息" name="post" style='background-color:white'>
                        <div class="down-form">
                            <div class="table">
                                <el-table
                                        ref="logTable"
                                        :data="tableData"
                                        v-loading="loading"
                                        border
                                        :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                                        style="width: 100%;font-size: 14px;color: #1f2d3d">
                                    <el-table-column
                                            type="index"
                                            label="序号"
                                            align="center"
                                            width="70">
                                    </el-table-column>
                                    <el-table-column
                                            prop="title"
                                            label="公告主题"
                                            min-width="15%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="content"
                                            label="公告内容"
                                            min-width="30%"
                                            show-overflow-tooltip
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createtime"
                                            label="发布时间"
                                            sortable
                                            min-width="15%"
                                            show-overflow-tooltip
                                            :formatter="dateFormat"
                                            align="center">
                                    </el-table-column>
                                    <el-table-column
                                            prop="communityname"
                                            label="小区名称"
                                            min-width="9%"
                                            align="center">
                                    </el-table-column>
<!--                                    管理员-->
                                    <el-table-column v-if="this.type == 1"
                                                     prop=""
                                                     label="操作"
                                                     min-width="11%"
                                                     align="center">
                                        <template slot-scope="scope">
                                            <div style="display: flex;margin-left: 3px">
                                                <el-button :plain="true"
                                                           size="mini"
                                                           type="danger"
                                                           style="font-size: 12px;color: #fff;background-color: #ff4949;border-color: #ff4949"
                                                           @click="del(scope.row, scope.$index)"
                                                ><i class="el-icon-delete"></i>归档</el-button>
                                                <el-button :plain="true"
                                                           size="mini"
                                                           type="primary"
                                                           style="color: #fff;font-size: 12px;background-color: #20a0ff;border-color: #20a0ff"
                                                           @click="detail(scope.row)"
                                                ><i class="el-icon-zoom-in"></i>查看公告</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
<!--                                    普通用户-->
                                    <el-table-column v-else
                                                     label="操作"
                                                     min-width="11%"
                                                     align="center">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button :plain="true"
                                                           size="mini"
                                                           type="primary"
                                                           style="color: #fff;font-size: 12px;background-color: #20a0ff;border-color: #20a0ff"
                                                           @click="detail(scope.row)"
                                                ><i class="el-icon-zoom-in"></i>查看公告</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination @current-change="handleCurrentChange"
                                               layout="total, sizes,prev, pager, next, jumper"
                                               :current-page.sync="iPagination.current"
                                               :page-size='iPagination.pageSize'
                                               :page-sizes="iPagination.pageSizeOptions"
                                               :total="iPagination.total"
                                               background
                                               @size-change="handleSizeChange">
                                </el-pagination>
                            </div>
                            <poster-dialog ref="posterDialog"></poster-dialog>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>


    </div>
</template>

<script>
    import moment from 'moment'
    import posterDialog from './posterDialog'
    export default {
        name: "post",
        components:{
            posterDialog,
        },
        data(){
            return{
                type:'',
                activeName: 'post',
                form:{
                    communityname:'',
                    title: '',
                    content: '',
                },
                tableData: [],
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [5, 10, 20, 50, 100],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                loading:false,
                dialogFormVisible: false,
            }
        },
        created(){
            let token = sessionStorage.token;
            this.$axiosToken({
                url: '/users/getUserByToken',
                method: 'get',
                data: {},
                success:(result=>{
                    this.type = result.type
                })
            });
        },
        mounted() {
            this.getPoster()
        },
        methods:{
            // 分页导航
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getPoster()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getPoster()
            },
            // 公告列表
            getPoster(){
                this.loading = true;
                this.$Axios({
                    url: '/poster/getPosterData',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 发布公告
            add(){
                if (this.form.communityname =='' || this.form.title =='' || this.form.content =='') {
                    this.$alert('请确保发布的公告内容是否填写完整','公告内容不全',{
                        confirmButtonText: '确定',
                    })
                }else {
                    this.$axiosToken({
                        url: '/poster/addPoster',
                        method: 'post',
                        data:{
                            communityname: this.form.communityname,
                            title: this.form.title,
                            content: this.form.content
                        },
                        success: (result)=>{
                            this.$message({
                                message: '发布公告成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.getPoster()
                            this.reset()
                        }
                    })
                }
            },
            // 清空输入框
            reset(){
                this.form={
                    communityname:'',
                    title: '',
                    content: '',
                }
                this.getPoster()
            },
            // 删除公告
            del(row,index){
                console.log(row,11)
                this.$confirm('确定永久归档这条公告？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    this.$axiosToken({
                        url: '/poster/delPoster',
                        method: 'get',
                        data:{p_id: row.p_id},
                        success: (result) =>{
                            this.$message({
                                message: '删除该公告信息成功',
                                type: 'success',
                                duration: 2000
                            });
                           this.getPoster()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消归档该公告',
                        duration: 2000
                    })
                })
            },
            detail(row){
                this.$refs.posterDialog.dialogFormVisible = true;
                this.$refs.posterDialog.formData = Object.assign(row)
            },
            // 时间格式转化
            dateFormat(row,column) {
                var date = row[column.property];
                if(date == undefined){
                    return ''
                }else {
                    return moment(date).format("YYYY-MM-DD HH:mm:ss")

                }
            },

        },
    }
</script>

<style scoped>
    /deep/ .el-input__inner{
        font-size: 14px;
        height: 36px;
    }
    .el-input{
        width: 21%;
        margin-left: 10px;
    }
    /deep/ .el-input__icon.el-range__icon.el-icon-date {
        line-height: 27px;
    }
    .el-select{
        width: 21%
    }
    .postButton{
        margin-left: 15px;
        width: 8%;
        font-size: 14px;
        color: #fff;
    }
    .tab{
        margin-top: 15px;
    }
    .block{
        float: right;
        margin-top: 10px;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    /deep/ .el-button--mini, .el-button--small{
        border-radius: 5px;
    }
</style>